<!--
  功能：自定义一个表单，携带按钮，并且点击按钮可以自动获取表单内控件的值，提交后台，同时此表单组件还能接受其他组件嵌入
  此表单并不采用遍历思路，而是依赖：model来自动遍历的思路
  特点：
  <el-form :model="form">
      <el-input v-model="form.input"/>
  </el-form>

  所以当点击提交时，只要向model索取数据即可，那么本表单也就变成了 点击按钮取下表单的model属性，拿到后

  mc-action:"" 提交表单的后台接受地址
  mc-method:"" 提交表单的后端地址方法
  mc-success-msg:"" 当提交成功 提示信息
  mc-fail-msg："" 当提交失败 提示信息

  mc-query-url:"" 初始化时渲染数据的地址
  废弃，不好用，已被McQuestionaire取代
-->
<template>
  <el-form :model="modelData" v-bind="$attrs" v-on="$listeners">
    <slot/>
    <el-button @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
export default {
    name: 'mc-model-form',
    data () {
        return {
        }
    },
    computed:{
        //可以实现外部变更 本组件同步变化
        modelData (){return this.model }
    },
    props: ['mcAction','mcMethod','mcSuccessMsg','mcFailMsg','mcQueryUrl','model'],
    mounted () {
          var request = this.$magicaltool.request;
          if(this.mcQueryUrl){
               request.axios({cache:true,$vue:this,method:"get",url:this.mcQueryUrl,params:{} })
               .then(function(response) {
                    var resData = response;
                    if(resData){
                        if(resData.code==0){
                            var data = resData.data;
                            if(data){
                                this.$emit("update:model",data);//通知外部变更：双向绑定 需要.sync配合  mc-model-form :model.sync="formData"
                            }
                        }
                    }
                }).catch(function (error) {
                    console.log(error)
                });
          }
    },
    methods:{
        submitForm:function(){
            var request = this.$magicaltool.request;
            var model = this.modelData;
            //下一步就简单了 拿到valueMap做入参 直接丢给后台api 请自行研究axios吧
            if(this.mcAction){
                switch(this.mcMethod){
                    case 'get' :
                        request.axios({$vue:this,method:"get",url:this.mcAction,params:model }).then(function(response) {
                                _t.afterSubmit(response);
                            }).catch(function (error) {
                                console.log(error)
                            });

                        break;
                    default:
                        request.axios({$vue:this,method:"post",url:this.mcAction,data:model,headers:{'content-type':'application/json','charset':'UTF-8'}}).then(function(response) {
                             _t.afterSubmit(response);
                        }).catch(function (error) {
                            console.log(error)
                        });
                }
            }else{
                this.$message("请配置请求地址mc-action");
            }
        },
        afterSubmit:function(data){
            if(data){
                if(typeof res['code']!== 'undefined' && res.code===0){
                    if(this.mcSuccessMsg){
                        this.$message(this.mcSuccessMsg);
                    }
                }else{
                    if(data['msg']){
                        this.$message(data.msg);
                    }else{
                        if(this.mcFailMsg){
                            this.$message(this.mcFailMsg);
                        }
                    }
                }
            }
        }
    }
}
</script>

<style lang="scss">

</style>
